<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
 <head>
 <title>YUI DataTable</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/yui/build/fonts/fonts-min.css" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/scripts/yui/build/datatable/assets/skins/sam/datatable.css"> 
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/yui/build/paginator/assets/skins/sam/paginator.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/yui/build/button/assets/skins/sam/button.css">
<style>
  .add {
	  background: url("<%=request.getContextPath()%>/scripts/flexigrid/css/images/add.png" ) no-repeat center left;
}

 .delete {
	  background: url("<%=request.getContextPath()%>/scripts/flexigrid/css/images/close.png" ) no-repeat center left;
}
</style>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/element/element-beta-min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/datasource/datasource-min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/paginator/paginator-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/button/button-min.js"></script>
 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/json/json-min.js"></script> 
 <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/connection/connection-min.js"></script> 
 <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/get/get-min.js"></script> 
 <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/dragdrop/dragdrop-min.js"></script> 
 <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/calendar/calendar-min.js"></script> 
 <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/datatable/datatable-min.js"></script> 
 <script language="javascript">
 	    function goToPage(e){

		}
 </script>
</head>
<body class="yui-skin-sam"> 
<table>
<tr> 
          <td width="50%" height="35" align="right"> 
		  <input name="searchwords"  id="searchwords" type="text" size="30"> 
          </td>
          <td width="0%" align="right">&nbsp;</td>
          <td width="50%" height="35"></td>
</tr>
<tr> 
     <td width="100%" height="35" align="left" colspan="2"> 
		  <span id="create-button" class="add"> </span>
		  <span id="edit-button"> </span>
		  <span id="delete-button" class="delete"> </span>
		  <span id="audit-button"> </span>
		  <span id="search-button"> </span>
     </td>
</tr>
</table>
<div id="paginationContainerTop"></div>
<div id="DataTableYUI"></div>
<div id="paginationContainerBottom"></div>
 

 <script type="text/javascript"> 

    YAHOO.example.DynamicData = ( function() {

		var createbutton = new YAHOO.widget.Button({ label:"新增", id:"create-button", container:"create-button" });
		createbutton.on("click", onCreateButtonClick);

		var editbutton = new YAHOO.widget.Button({ label:"修改", id:"edit-button", container:"edit-button" });
		editbutton.on("click", onEditButtonClick);

		var auditbutton = new YAHOO.widget.Button({ label:"审核", id:"audit-button", container:"audit-button" });
		auditbutton.on("click", onAuditButtonClick);

		var deletebutton = new YAHOO.widget.Button({ label:"删除", id:"delete-button", container:"delete-button" });
		deletebutton.on("click", onDeleteButtonClick);

		var searchbutton = new YAHOO.widget.Button({ label:"搜索", id:"search-button", container:"search-button" });
		searchbutton.on("click", onSearchButtonClick);

	

		function onSearchButtonClick(e) {
				myDataSource.sendRequest('searchwords='+document.getElementById("searchwords").value, oCallback);
				myDataTable.initializeTable(); 
				myDataTable.render(); 
				myDataTable.showTableMessage("<center>正在加载数据,请稍候...</center>");
	   }

	   function onCreateButtonClick(e) {
			window.open("");
		}
	   
	   function onEditButtonClick(e) {
			var selectRows = myDataTable.getSelectedRows();
			 if(selectRows.length!=null && selectRows.length==1){
				  oRecord = myDataTable.getRecordSet().getRecord(selectRows[0]);
				  var rowId = YAHOO.lang.dump(oRecord.getData("rowId"));
				  alert(rowId);
				} else{
				  alert("请选中一行进行编辑。");
			  }
		}

		function onAuditButtonClick(e) {
			var selectRows = myDataTable.getSelectedRows();
			 if(selectRows.length!=null && selectRows.length==1){
				  oRecord = myDataTable.getRecordSet().getRecord(selectRows[0]);
				  var rowId = YAHOO.lang.dump(oRecord.getData("rowId"));
				  alert(rowId);
				} else{
				  alert("请选中一行进行审核。");
			  }
		}

		function onDeleteButtonClick(e) {
			var selectRows = myDataTable.getSelectedRows();
			 if(selectRows.length!=null && selectRows.length > 0 ){
				  oRecord = myDataTable.getRecordSet().getRecord(selectRows[0]);
				  var rowId = YAHOO.lang.dump(oRecord.getData("rowId"));
				  alert(rowId);
				} else{
				  alert("请选中至少一行。");
			  }
		 }

        myDataSource = new YAHOO.util.DataSource("yui_product_json.jsp?");
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
		myDataSource.connXhrMode = "queueRequests";
        myDataSource.responseSchema = { 
	    resultsList : "records",  
	    fields : [
            {key:"rowId"},
		    {key:"productId"},
            {key:"productName"},
            {key:"productDate"},
            {key:"price",parser:"number"},
            {key:"quantity",parser:"number"}
        ],
		metaFields: {
                totalRecords: "totalRecords"
            }
	   }; 
	 
 	   var imgFormatter = function(elCell, oRecord, oColumn, oData) {
               var imginfo = oData; 
               elCell.innerHTML = "<img width=12 height=12 src=" + imginfo + "></img>";
            };

      YAHOO.widget.DataTable.Formatter.imginfoFormatter = imgFormatter;
  
	  var myColumnDefs = [ 
        {key:"productId", label:"产品ID", sortable:false},
        {key:"productName", label:"产品名称", sortable:true},
        {key:"productDate", label:"生产日期", sortable:true},
        {key:"price", label:"单价", sortable:true},
        {key:"quantity", label:"数量", sortable:true}
    ];

    var t0="{FirstPageLink}&nbsp;&nbsp;{PreviousPageLink}&nbsp;&nbsp;{NextPageLink}&nbsp;&nbsp;{LastPageLink}&nbsp;&nbsp;";
    t0+="{CurrentPageReport}";

    var t2 = "<input type='text' id='goToPage' size='5' value='{currentPage}'>&nbsp;<img src='<%=request.getContextPath()%>/pages/images/go.gif' border='0' style='cursor:hand' onclick='javascript:return goToPage();' >&nbsp;&nbsp;第&nbsp;{currentPage}&nbsp;页&nbsp;&nbsp;总页数:&nbsp;{totalPages}&nbsp;&nbsp;总记录数:&nbsp;{totalRecords}&nbsp;&nbsp;";

	var myConfigs = { 
         initialRequest:"sort=productId&dir=asc&startIndex=0&results=15",
		 dynamicData: true, 
		 MSG_LOADING: "<center>正在加载数据,请稍候...</center>",
		 MSG_ERROR: "加载数据发生错误,查询路径是否正确?",
         MSG_EMPTY: "没有相关记录",
		 MSG_SORTASC: "以升序方式排序",
		 MSG_SORTDESC: "以降序方式排序",
		 paginator: new YAHOO.widget.Paginator({
                    rowsPerPage: 15,
					containers : ['paginationContainerTop', 'paginationContainerBottom'],
					PageLinks : YAHOO.widget.Paginator.VALUE_UNLIMITED,
					firstPageLinkLabel : "首页", 
                    lastPageLinkLabel : "尾页", 
                    previousPageLinkLabel:"上一页",
                    nextPageLinkLabel:"下一页",
					template: t0,
 					pageReportTemplate: t2
                })
	}; 
       
    this.myDataTable = new YAHOO.widget.DataTable("DataTableYUI", myColumnDefs, myDataSource, myConfigs);
	this.myDataTable.subscribe("rowMouseoverEvent", this.myDataTable.onEventHighlightRow);
    this.myDataTable.subscribe("rowMouseoutEvent", this.myDataTable.onEventUnhighlightRow);
    this.myDataTable.subscribe("rowClickEvent", this.myDataTable.onEventSelectRow);

	// Programmatically select the first row
	myDataTable.selectRow(myDataTable.getTrEl(0));
	// Programmatically bring focus to the instance so arrow selection works immediately
	myDataTable.focus();

	//myDataTable.hideColumn("productId");

    this.myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
            oPayload.totalRecords = oResponse.meta.totalRecords;
            return oPayload;
        }    

	return {
			ds: myDataSource,
			dt: myDataTable
		};

   })();
  </script> 
 </body>
</html>